import { FC } from 'react';
import React, { useContext } from 'react';
// @ts-ignore
import { history } from 'dumi';
import { context, Link } from 'dumi/theme';
import './LocaleSelect.less';

const LocaleSelect: FC<{ location: any }> = ({ location }) => {
	const {
		base,
		locale,
		config: { locales },
	} = useContext(context);
	const firstDiffLocale = locales.find(({ name }) => name !== locale);

	function getLocaleTogglePath(target: string) {
		const baseWithoutLocale = base.replace(`/${locale}`, '');
		const pathnameWithoutLocale =
			location.pathname.replace(base, baseWithoutLocale) || '/';

		// append locale prefix to path if it is not the default locale
		if (target !== locales[0].name) {
			// compatiable with integrate route prefix /~docs
			const routePrefix = `${baseWithoutLocale}/${target}`.replace(
				/\/\//,
				'/',
			);
			const pathnameWithoutBase = location.pathname.replace(
				// to avoid stripped the first /
				base.replace(/^\/$/, '//'),
				'',
			);

			return `${routePrefix}${pathnameWithoutBase}`.replace(/\/$/, '');
		}

		return pathnameWithoutLocale;
	}

	return firstDiffLocale ? (
		<div
			className="__dumi-default-locale-select"
			data-locale-count={locales.length}
		>
			{locales.length > 2 ? (
				<select
					value={locale}
					onChange={(ev) =>
						history.push(getLocaleTogglePath(ev.target.value))
					}
				>
					{locales.map((localeItem) => (
						<option value={localeItem.name} key={localeItem.name}>
							{localeItem.label}
						</option>
					))}
				</select>
			) : (
				<Link to={getLocaleTogglePath(firstDiffLocale.name)}>
					{firstDiffLocale.label}
				</Link>
			)}
		</div>
	) : null;
};

export default LocaleSelect;
